<template>
    <div class="px-8 py-6 space-y-6">
        <!-- 标题 -->
        <div class="flex justify-between items-center  bg-white px-8 py-6">
            <div class="flex flex-col space-y-2">
                <span class="font-bold text-xl">{{ examInfo.title }}</span>
                <span class="text-gray-400">题量: {{examInfo.totalQuestions}}  满分: 100  难度： 中</span>
            </div>
            <div>
                  <el-button type="info" link @click="handleDownload" >
                        <font-awesome-icon :icon="['fas', 'arrow-up-from-bracket']"  class="mr-1" />
                        下载分析报告
                    </el-button>
            </div>
        </div>
        <!-- 题型统计分析 -->
         <div class="  bg-white px-8 py-6 flex flex-col space-y-4 w-full">
            <div>题型统计分析</div>
            <div>本试卷共 <span class="text-orange-400">{{examInfo.totalQuestions}} </span> 题，涉及 <span class="text-orange-400">{{sections.length}} </span>  个题型。
                其中题量占比最大的题型为 单选题，分值占比最大的题型为 单选题。
            </div>
              <ChartAnalysis :chartData="chartData"></ChartAnalysis>
         </div>
        <!-- 难易度统计分析 -->
           <div class="  bg-white px-8 py-6 flex flex-col space-y-4">
            <div>难易度统计分析</div>
            <ChartAnalysis :chartData="chartData2"></ChartAnalysis>
         </div>
        <!-- 题目详情-->
           <div class="  bg-white px-8 py-6 flex flex-col space-y-4">
            <div>题目详情</div>
            <div class=" flex  space-x-4">
                <el-select v-model="questionType" placeholder="全部题型" class="w-80">
                    <el-option label="全部题型" value="0"></el-option>
                    <el-option label="单选题" value="1"></el-option>
                    <el-option label="多选题" value="2"></el-option>
                    <el-option label="填空题" value="3"></el-option>
                    <el-option label="判断题" value="4"></el-option>
                    <el-option label="简答题" value="5"></el-option>
                </el-select> 
                <el-select v-model="questionDifficulty" placeholder="全部难易度" class="w-80">   
                    <el-option label="全部" value="0"></el-option>
                    <el-option label="易" value="1"></el-option>
                    <el-option label="中" value="2"></el-option>
                    <el-option label="难" value="3"></el-option>
                </el-select>    
                <el-select v-model="questionKnowledge" placeholder="全部知识点" class="w-80">   
                    <el-option label="全部" value="0"></el-option>
                </el-select>    
            </div>
            <el-table  :data="paperQuestions"  stripe  style="width: 100%" >
                <el-table-column type="index" width="70"  label="题号"></el-table-column>
                <el-table-column prop="content"  label="题干"></el-table-column>
                <el-table-column prop="type"  label="题型"  width="100"></el-table-column>
                <el-table-column prop="difficulty_desc"  label="难易度" width="100"></el-table-column>
                <el-table-column prop="knowledge_point"  label="知识点" width="200"></el-table-column>
                <el-table-column prop="accuracy"  label="正确率" width="100"></el-table-column>
                <el-table-column prop="score"  label="题目分数" width="100"></el-table-column>
            </el-table>     
         </div>
    </div>
    
</template>

<script setup>
import { ref,onMounted,reactive,onBeforeUnmount,watch} from 'vue'
import { getPaperStructure } from '@/api/exam'
import  ChartAnalysis from '@/views/exam/examComponents/ChartAnalysis.vue'
import { ElMessage } from 'element-plus'
//获取结构分析数据 
const  paperQuestions = ref([])
 const  examInfo= ref({
   title: "2024-2025 操作系统期末卷",
   totalQuestions: 43,
   totalScore: 100,
   difficulty: "中"
 }) 
 const  sections = ref([])
const getPaperStructureData = () => { 
    getPaperStructure().then(res => { 
        console.log(res.data,'《《《《data')
        examInfo.value = res.data.data.examInfo
        sections.value = res.data.data.sections
        paperQuestions.value= res.data.data.questions
    })
}
onMounted(()=>{   
    getPaperStructureData()
})

const  questionDifficulty = ref('0')
const  questionType = ref('0')
const  questionKnowledge = ref('0')

//题量分布和分数分布的图标

const  chartData =[
    {name:'单选题',num:10,score:10},
    {name:'填空题',num:4,score:8},
    {name:'简答题',num:4,score:15},
    {name:'判断题',num:5,score:7},
]
const  chartData2 =[
    {name:'易',num:10,score:10},
    {name:'中',num:4,score:8},
    {name:'难',num:4,score:15},
]

const handleDownload = () => {
    ElMessage.success('下载成功')
    
}

</script >
<style lang="less" scoped>
.el-table :deep(th.el-table__cell) {
  background-color: #f9fafb;
  font-weight: 600;
}
</style>